<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="~{common/header :: commonHead}">
    <title>广告详情</title>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 th:text="${null == editable ? '添加广告' : '修改广告'}"></h5>
                    <span style="color: red"> （带*号必填）</span>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <form class="row form-body form-horizontal m-t" method="post"
                          th:action="${null == editable ? '/banner/add' : '/banner/edit'}">
                        <input name="id" th:value="${editable?.id}" style="display: none">
                        <div class="col-md-12 droppable sortable ui-droppable ui-sortable">
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">广告描述：</label>
                                <div class="col-sm-6">
                                    <input type="text" required name="bannerDesc" class="form-control"
                                           th:value="${editable?.bannerDesc }" placeholder="请输入广告名称">
                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">广告内容：</label>
                                <div class="col-sm-6">
                                    <input type="text" name="bannerText" class="form-control"
                                           th:value="${editable?.bannerText }" placeholder="请输入广告描述">
                                </div>
                            </div>


                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label"><span style="color: red;">* </span>上传图片：</label>
                                <div class="col-sm-6">
                                    <div id="add_icons" class="add_icons">
                                        <div class="add_icon_pan">
                                            <input name="upload_pic"
                                                   id="upload_pic" type="file"
                                                   accept="image/*"
                                                   control_id="control_id"
                                                   image_id="image_id"
                                                   class="upload_pic_input"  style="">
                                            <img id="uploaded_pic" th:class="${editable?.imageAddress != null ? '' : 'hide' }"
                                                 th:src="${editable?.imageAddress != null ? editable.imageAddress : ''}"/>
                                            <div th:class="'mark ' + ${editable?.imageAddress != null ? '' : 'hide' }">
                                                <div class="close_icon_button"
                                                     control_id="imageAddress"></div>
                                            </div>
                                            <label for="upload_pic"
                                                   th:class="'add_icon_button ' + ${editable?.imageAddress != null ? 'hide' : ''}"></label>
                                        </div>
                                    </div>
                                    <label class="help-block">logo 200*200 100k以内</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-md-4 col-sm-12 control-label" for="control_id"></label>
                                <div class="col-lg-4 col-md-8 ">
                                    <input class="form-control" id="control_id" name="imageAddress" type="text" th:value="${editable?.imageAddress}" style="display: none;">
                                    <input class="form-control" id="image_id" name="imageId" type="text" th:value="${editable?.imageId}" style="display: none;">

                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">排序数：</label>
                                <div class="col-sm-6">
                                    <input type="text" required name="sortOrder" class="form-control" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                           th:value="${editable?.sortOrder }" placeholder="请输入排序数（注：此处填写数值越小，在前端排序的位置越靠前，只可填写整数）">
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">展示时间：</label>
                                <div class="col-sm-3">
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" required readonly placeholder="开始时间"
                                               id="show_start_time" th:value="${editable?.startTime}" name="startTime">
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" required readonly placeholder="结束时间"
                                               id="show_end_time" th:value="${editable?.endTime}" name="endTime">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" id="adsence"
                                 th:style="static">
                                <label class="col-sm-3 control-label">选择广告位置：</label>
                                <div class="col-sm-6">
                                    <select id="orgId2" required name="adsenceId" data-placeholder="请选择广告..."
                                            class="chosen-select form-control m-b" tabindex="1">
                                        <option value="" th:selected="${editable?.adsenceId == null}">--请选择--</option>
                                        <option class="id_option" hassubinfo="true"
                                                th:each="adsenceDTO:${adsenceDTOS}"
                                                th:selected="${editable?.adsenceId == adsenceDTO.id}"
                                                th:value="${adsenceDTO.id }"
                                                th:text="${adsenceDTO.name}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static">
                                <label class="col-sm-3 control-label">跳转方向：</label>
                                <div class="col-sm-6">
                                    <select  class="form-control" name="linkType" id="to-link">
                                        <!--1.跳转活动 2.暂未定 3.跳转外链-->
                                        <option value="">--请选择--</option>
                                        <option th:selected="${editable?.linkType == 1}" value="1">指定跳转活动</option>
                                        <option th:selected="${editable?.linkType == 3}" value="3">指定跳转外链</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" id="activity"
                                 th:style="${'position: static; display:' + (editable?.linkType == 1 ? 'block' : 'none')}">
                                <label class="col-sm-3 control-label">选择活动：</label>
                                <div class="col-sm-6">
                                    <select  id="orgId" name="activityId" data-placeholder="请选择活动..."
                                            class="chosen-select form-control m-b" tabindex="1">
                                        <option value="">--请选择--</option>
                                        <option class="id_option" hassubinfo="true"
                                                th:each="activityDTO:${activityDTOS}"
                                                th:selected="${activityDTO.id == editable?.activityId}"
                                                th:value="${activityDTO.id}"
                                                th:text="${activityDTO.activityName}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" id="interlinkage"
                                 th:style="${'position: static; display:' + (editable?.linkType == 3 ? 'block' : 'none')}">
                                <label class="col-sm-3 control-label">跳转链接：</label>
                                <div class="col-sm-6">
                                    <input type="text" name="linkValue" id="link_value" class="form-control" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                                           th:value="${editable?. linkValue }" placeholder="请输入跳转链接（注：不可输入空格！！！）">
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>

                            <div class="form-group draggable ui-draggable">
                                <div class="col-sm-12 col-sm-offset-3">
                                    <button class="btn btn-primary" id="submit-form" type="submit">保存内容</button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/plugins/chosen/chosen.jquery.js"></script>
<script th:inline="javascript">
    let image_id;
    $("#submit-form").click(()=>{
        image_id = $("#image_id").val();
    if (image_id==null||image_id==''){
        layer.msg("请上传图片",{time: 500})
        return false;
    }
    });


    let flag = [[${error}]];
    if (flag) {
        layer.msg("保存失败",{icon: 1,time: 1000,shade : [0.5 , '#000' , true]});
    }
    $("#to-link").change(function () {
        let selection = $(this).val();
        if (selection == 1) {
            $("#activity").css('display', 'block');
            $("#interlinkage").css('display', 'none');
            $("#orgId").attr('required','required');
            $("#link_value").removeAttr("required");
            $("#orgId2").attr('required','required');
        }
        if (selection == 3) {
            $("#activity").css('display', 'none');
            $("#interlinkage").css('display', 'block');
            $("#link_value").attr('required','required');
            $("#orgId").removeAttr("required");
            $("#orgId2").attr('required','required');
        }
        if (selection != 1 && selection != 3) {
            $("#activity").css('display', 'none');
            $("#interlinkage").css('display', 'none');
            $("#orgId2").attr('required','required');
        }
    })

    $(function () {

        $("#orgId").comboSelect();
        $("#orgId2").comboSelect();

    });

    $("#to-link").change(function () {
        let selection = $(this).val();
        if (selection == 1) {
            $("#activity").css('display', 'block');
            $("#interlinkage").css('display', 'none');
        }
        if (selection == 3) {
            $("#activity").css('display', 'none');
            $("#interlinkage").css('display', 'block');
        }
        if (selection != 1 && selection != 3) {
            $("#activity").css('display', 'none');
            $("#interlinkage").css('display', 'none');
        }
    })

</script>
</body>
</html>